<template>
	<view class="container">
		<view class="index-nav u-flex u-col-center u-row-center">
			<view class="item" v-for="(item, index) in navlist" :key="index" @click="change(index)">
				<text v-if="index == 0">{{ params.gameZoneName || item }}</text>
				<text v-if="index == 1">{{ params.priceBegin && number2 ? `${params.priceBegin}-${number2}` : item }}</text>
				<text v-if="index == 2">{{ item }}</text>
				<image src="@/static/down.png" mode="aspectFill"></image>
			</view>
		</view>
		<view class="list">
			<view class="item u-flex u-col-top u-row-between" v-for="(item, index) in list" :key="index">
				<view class="img">
					<image :src="item.image" mode="aspectFill" v-if="item.image"></image>
					<image :src="webconfigImg" mode="aspectFill" v-else></image>
				</view>
				<view class="con">
					<view class="title u-line-2">
						{{ item.name }}
					</view>
					<view class="info">
						{{ item.gameZoneName }}
					</view>
					<view class="info2" @click="open2(item)">
						<view class="i1 u-flex u-col-center">
							<text>ID:*** | ***</text>
							<image src="@/static/y.png" mode="aspectFill"></image>
						</view>
						<view class="i2">点击此处查看详细信息>></view>
					</view>
					<view class="btns_flex">
						<view class="price" v-if="item.price">
							<text
								class="p"
								:class="{
									p1: getPriceLength(item.price) < 6,
									p2: getPriceLength(item.price) == 6,
									p3: getPriceLength(item.price) == 7,
									p4: getPriceLength(item.price) == 8,
									p5: getPriceLength(item.price) >= 9
								}"
							>
								{{ $numToLocaleString(item.price) }}
							</text>
							<text class="y">{{ item.priceUnit == 0 ? 'MHB' : '元' }}</text>
						</view>
						<view class="btns_flex" v-if="item.maxBuyerPrice && item.priceMode == 1">
							<view class="price">
								<text class="y">最高出价：</text>
								<text
									class="p"
									:class="{
										p1: getPriceLength(item.maxBuyerPrice) < 6,
										p2: getPriceLength(item.maxBuyerPrice) == 6,
										p3: getPriceLength(item.maxBuyerPrice) == 7,
										p4: getPriceLength(item.maxBuyerPrice) == 8,
										p5: getPriceLength(item.maxBuyerPrice) >= 9
									}"
								>
									{{ $numToLocaleString(item.maxBuyerPrice) }}
								</text>
								<text class="y">{{ item.priceUnit == 0 ? 'MHB' : '元' }}</text>
							</view>
						</view>
						<view class="price" v-if="!item.maxBuyerPrice && item.priceMode == 1">
							<text class="y">暂无出价 {{ item.priceUnit == 0 ? 'MHB' : '元' }}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="nolist" v-if="nolist">
				<image src="/static/k5.png" mode="aspectFill"></image>
				<view class="p">暂无报价，系统核实到该词条搜索人数较多，可能存在商机 是否发布报价？</view>
				<view class="btns" @click="$pageTo('/pages/user/release')">去发布</view>
			</view>
			<view class="nomore" v-if="nomore">没有更多啦~</view>
		</view>
		<view class="fixedimg flex_jc_cent" @click="gotop" v-if="isshowBtn">
			<image src="/static/top.png" mode=""></image>
		</view>
		<uni-popup ref="popup6" type="bottom" :safe-area="false">
			<view class="bottom_select">
				<uni-icons type="closeempty" size="22" color="#AEAEAE" class="icons" @click="close(6)"></uni-icons>
				<view class="f-title">服务器名称</view>
				<scroll-view scroll-y="true" class="scroll">
					<view class="flex_i">
						<view @click="changName(item)" 
						class="items" v-for="(item,index) in range" :key="index"
						:class="kw==item.text?'actbtn':''">
							{{item.text}}
						</view>
					</view>
				</scroll-view>
				<view class="btns flex_jc_cent">
					<view class="btn" @click="popRest">清除</view>
					<view class="btn b1" @click="popSunmit">确认</view>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="popup1" type="top">
			<view class="pop-search">
				<view class="nav u-flex u-col-center u-row-center">
					<view class="item u-flex u-col-center u-row-center" :class="{ on: navindex == index }" v-for="(item, index) in navlist" :key="index" @click="change2(index)">
						<text v-if="index == 0">{{ params.gameZoneName || item }}</text>
						<text v-if="index == 1">{{ params.priceBegin && number2 ? `${params.priceBegin}-${number2}` : item }}</text>
						<text v-if="index == 2">{{ item }}</text>
						<image src="@/static/down2.png" mode="aspectFill" v-if="navindex == index"></image>
						<image src="@/static/down.png" mode="aspectFill" v-else></image>
					</view>
				</view>
				<view class="middle" v-if="navindex == 0">
				<!-- 	<view class="search u-flex u-col-center u-row-between">
						<uni-icons type="search" size="20" color="#D1D1D6"></uni-icons>
						<input
							class="uni-input"
							v-model="kw"
							confirm-type="search"
							placeholder="请输入大区名称"
							placeholder-style="font-size: 26rpx;color: #D1D1D6;"
							@input="confirm"
							 
						/>
					</view>
					<view class="s-list" v-if="flist.length > 0">
						<view class="i" v-for="(item, index) in flist" :key="index" @click="changeZone(item)">
							<uni-icons type="search" size="20" color="#D1D1D6"></uni-icons>
							<view class="m u-l-1">
								<rich-text :nodes="item.name2"></rich-text>
							</view>
							<image src="@/static/search2.png" mode="aspectFill" class="image1"></image>
						</view>
					</view> -->
					<uni-data-select v-model="kw" :localdata="range"></uni-data-select>
				</view>
				<view class="middle" v-if="navindex == 1">
					<view class="item_flex">
						<view class="m-t">
							价格范围
							<text v-if="params.priceUnit == 0">(MHB)</text>
							<text v-if="params.priceUnit == 1">(元)</text>
						</view>
						<view class="u-flex">
							<view class="ttt" :style="{ color: params.priceUnit == 0 ? '#FF6F07' : '' }" @click="changetype(0)">
								<image v-if="params.priceUnit == 0" src="/static/c6.png" mode=""></image>
								<image v-else src="/static/c1.png" mode=""></image>
								MHB
							</view>
							<view :style="{ color: params.priceUnit == 1 ? '#FF6F07' : '' }" style="margin-left: 30rpx" class="ttt" @click="changetype(1)">
								<image v-if="params.priceUnit == 1" src="/static/c6.png" mode=""></image>
								<image v-else src="/static/c1.png" mode=""></image>
								元
							</view>
						</view>
					</view>

					<view class="m-inputs">
						<view class="i">
							<input type="number" v-model="number1" placeholder="最低价格范围" placeholder-style="font-size: 26rpx;color: #D1D1D6;" />
						</view>
						<view class="i2">-</view>
						<view class="i">
							<input type="number" v-model="number2" placeholder="最高价格范围" placeholder-style="font-size: 26rpx;color: #D1D1D6;" maxlength="9" />
						</view>
					</view>
				</view>
				<view class="middle" style="padding: 0 0rpx 10rpx" v-if="navindex == 2">
					<view class="selectList">
						<view class="items" :class="item.isclick ? 'itemsSelect' : ''" v-for="(item, index) in orderList" :key="index" @click="changeSelect(item)">
							{{ item.name }}
							<uni-icons v-if="item.isclick" type="checkmarkempty" color="#FF6F07"></uni-icons>
						</view>
					</view>
				</view>
				<view v-if="navindex != 2" class="pop-btns u-flex u-col-center u-row-between">
					<view class="btn btn1" @click="popRest">重置</view>
					<view class="btn btn2" @click="popSunmit">确认</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup2" type="bottom" :safe-area="false">
			<view class="pop-footer">
				<uni-icons type="closeempty" size="22" color="#AEAEAE" class="icons" @click="close(2)"></uni-icons>
				<view class="f-title">查看信息</view>
				<view class="f-list">
					<view class="item item1 u-flex u-col-center u-row-between" @click="seePay" v-if="wxpay == 1">
						<image src="../../static/order12.png" mode="aspectFill" class="bg"></image>
						<view class="img">
							<image src="../../static/order11.png" mode="aspectFill"></image>
						</view>
						<view class="con" style="color: #b44b00">支付{{ dyprice }}商人币立即获得1次查看次数</view>
					</view>
					<view class="item item2 u-flex u-col-center u-row-between" @click="seeAd" v-if="wxquery == 1">
						<image src="../../static/order22.png" mode="aspectFill" class="bg2"></image>
						<view class="img">
							<image src="../../static/order21.png" mode="aspectFill"></image>
						</view>
						<view class="con" style="color: #003b9d">查看广告，免费获取查看次数</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup3" type="center">
			<view class="pop-data">
				<view class="data-img">
					<image :src="data.image" mode="aspectFill" v-if="data.image"></image>
					<image :src="webconfigImg" mode="aspectFill" v-else></image>
				</view>
				<view class="data-con">
					<view class="title u-line-2">
						{{ data.name }}
					</view>
					<view class="flex_jc_sb">
						<view class="price" v-if="data.price">
							<text
								class="p"
								:class="{
									p1: getPriceLength(data.price) < 6,
									p2: getPriceLength(data.price) == 6,
									p3: getPriceLength(data.price) == 7,
									p4: getPriceLength(data.price) == 8,
									p5: getPriceLength(data.price) >= 9
								}"
							>
								{{ $numToLocaleString(data.price) }}
							</text>
							<text class="y">{{ data.priceUnit == 0 ? 'MHB' : '元' }}</text>
						</view>
						<view class="btns_flex" v-if="itemData.maxBuyerPrice && itemData.priceMode == 1">
							<view class="price">
								<text class="y">最高出价：</text>
								<text
									class="p"
									:class="{
										p1: getPriceLength(itemData.maxBuyerPrice) < 6,
										p2: getPriceLength(itemData.maxBuyerPrice) == 6,
										p3: getPriceLength(itemData.maxBuyerPrice) == 7,
										p4: getPriceLength(itemData.maxBuyerPrice) == 8,
										p5: getPriceLength(itemData.maxBuyerPrice) >= 9
									}"
								>
									{{ $numToLocaleString(itemData.maxBuyerPrice) }}
								</text>
								<text class="y">{{ itemData.priceUnit == 0 ? 'MHB' : '元' }}</text>
							</view>
						</view>
						<view class="price" v-if="!itemData.maxBuyerPrice && itemData.priceMode == 1">
							<text class="y">暂无出价</text>
						</view>
						<view class="xbtn flex_jc_cent" @click="goJubao">
							<image src="/static/xxx.png" mode=""></image>
							举报
						</view>
					</view>
					<view class="info">
						{{ data.gameZoneName }}
					</view>
					<view class="info2">
						<view class="p">
							ID：{{ data.account }}
							<text @click="$copyFun(data.account)">复制</text>
						</view>
						<view class="p flex">
							<image src="/static/wx.png" mode=""></image>
							{{ data.wechat }}
							<text @click="$copyFun(data.wechat)">复制</text>
						</view>
						<view class="p flex">
							<image src="/static/sj.png" mode=""></image>
							  {{ data.phone }}
							<text @click="$copyFun(data.phone)">复制</text>
						</view>
					</view>
				</view>
				<view class="btn" v-if="data.priceUnit == 1 && userid != userInfo.id && data.priceMode != 1" @click="opensss(data)">
					{{ params.type == 1 ? '购买' : '卖出' }}
				</view>
				<view class="btn" v-if="userid != userInfo.id && data.priceMode == 1" @click="goCHUJIA(id)">
					{{ isTwoPrice ? '重新出价' : '出价' }}
				</view>
				<view class="close" @click="close(3)">
					<uni-icons size="34" type="close" color="#fff"></uni-icons>
				</view>
			</view>
		</uni-popup>
		<uni-popup type="bottom" ref="popup4" :animation="false" :safe-area="false">
			<view class="popup4">
				<view class="contetn">
					<uni-icons @click="close(4)" class="icon" size="24" type="closeempty"></uni-icons>
					<view class="title">温馨提示</view>
					<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="lower">
						<view class="textsSclow">
							<view class="" v-html="safeOrderRemark"></view>
						</view>
					</scroll-view>
					<view class="btntext" v-if="yesBottom">请向下滑动阅读</view>
					<view class="btntext active" v-else @click="gosign">我已联系到对方，可以开始交易</view>
				</view>
				<view class="imgs">
					<view class="btntexts" @click.self="close(4)">取消交易</view>
					<image src="@/static/btimg.png" mode=""></image>
				</view>
				<view class="bcgc"></view>
			</view>
		</uni-popup>
		<uni-popup type="center" ref="popup5" :animation="false" :safe-area="false">
			<view class="popup5">
				<view class="contetn">
					<uni-icons @click="close(5)" class="icon" size="24" type="closeempty"></uni-icons>
					<view class="title">温馨提示</view>
					<view class="ts" v-if="btntype == 1">对方正在交易中，暂不可交易</view>
					<view class="ts" v-if="btntype == 2">您当前有正在交易中的订单</view>
					<view class="btns_flex">
						<view class="b1" @click="close(5)">关闭</view>
						<view class="b2" v-if="btntype == 2" @click="gourl()">立即查看</view>
						<view v-if="btntype == 1" class="b2" @click="close(5)">我知道了</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { zoneallList,webconfig, getSearchList, zoneList, searchpay, searchinfo, updateNumber, createOrder, checkOrder, searchBuyerInfo } from '@/common/http.api.js';
export default {
	data() {
		return {
			webconfigImg: uni.getStorageSync('webconfig').productDefaultImage,
			navlist: ['大区名称', '报价筛选', '排序'],
			navindex: 0,
			number1: '',
			number2: '',
			flist: [],
			kw: '',
			indexa: -1,
			dyprice: '', //信息查询费用抖音
			data: {},
			pages: 0,
			userInfo: uni.getStorageSync('userInfo'),
			ad: null,
			wxquery: 1, //信息查询广告抖音 1开启 0关闭
			formattedDate: '',
			nomore: false,
			id: '',
			wxpay: 1, //信息查询付费抖音 1开启 0关闭
			list: [],
			nolist: false,
			params: {
				paytype: 2,
				type: 2,
				name: '',
				gameZoneName: '',
				priceBegin: '',
				priceEnd: '',
				page: 1,
				order: 1,
				priceUnit: undefined
			},
			safeOrderRemark: '',
			yesBottom: true,
			orderID: 0,
			orderList: [
				{
					name: '默认排序',
					order: 1,
					isclick: true
				},
				{
					name: '最新发布',
					order: 2,
					isclick: false
				},
				{
					name: '价格从低到高',
					order: 3,
					isclick: false
				},
				{
					name: '价格从高到低',
					order: 4,
					isclick: false
				}
			],

			btntype: 1,
			urlID: 0,
			userid: 0,

			itemData: {}, //单挑数据信息

			isTwoPrice: false,
			priceData: {},
			
			
			isshowBtn:false,
			
			range: []
		};
	},
	onLoad(o) {
		zoneallList().then((res) => {
			if(res.code == 200){
				this.range = res.data.list.map((i) => ({
					text: i.name,
					value: i.name
				}));
				setTimeout(()=>{
					this.$refs.popup6.open();
				},100)
			}
		});
		uni.setNavigationBarTitle({
			title: o.type == 2 ? '查询变现价' : '查询在售价'
		});
		this.params.name = o.name || '';
		this.params.type = o.type || 2;
		const dateObj = new Date();
		const year = dateObj.getFullYear(); // 获取当前年份
		const month = ('0' + (dateObj.getMonth() + 1)).slice(-2); // 获取当前月份，其中需要将月份加1，因为月份是从0开始计数的
		const day = ('0' + dateObj.getDate()).slice(-2); // 获取当前日期
		this.formattedDate = `${year}-${month}-${day}`; // 格式化日期
		this.getwebconfig();
	},
	onShow() {
		this.params.page = 1;
		this.list = [];
		this.getlist();
	},
	onPageScroll(e){
		this.isshowBtn = e.scrollTop>500
		this.scroll = e.scrollTop
	},
	onUnload() {
		if (this.ad) {
			this.ad.offClose(this.onCloseListener);
			this.ad.destroy();
		}
		uni.removeStorageSync('getBuyData');
		uni.removeStorageSync('uid');
		uni.removeStorageSync('sListPageRandom');
	},
	onReachBottom() {
		this.params.page++;
		this.getlist();
	},
	computed: {
		getPriceLength() {
			return (data) => {
				if (!data) return 1;

				function getDigitCount(num) {
					if (num === 0) return 1;

					num = Math.abs(parseInt(num)); // 忽略小数部分，只处理整数
					return Math.floor(Math.log10(num)) + 1;
				}
				let l = getDigitCount(data);
				return l;
			};
		}
	},
	methods: {
		changName(item){
			console.log(item);
			this.kw = item.text
		},
		gotop(){
			uni.pageScrollTo({
				scrollTop:0,
			})
		},
		goJubao() {
			uni.navigateTo({
				url: `/pages/user/complaint?id=${this.itemData.id}&&type=1`
			});
			this.close(3);
		},
		// 转到出价页面
		goCHUJIA(id) {
			// 有两种 一种是第一次出价 一种是重新出价
			// 重新出价需要携带参数过去 当前人的信息 当前商品最高价
			if (this.isTwoPrice) {
				uni.navigateTo({
					url: `/pages/index/price?obj=` + encodeURIComponent(JSON.stringify(this.priceData))
				});
			} else {
				uni.navigateTo({
					url: `/pages/index/price?obj=` + encodeURIComponent(JSON.stringify(this.itemData))
				});
			}
			this.close(3);
		},
		opensss(item) {
			checkOrder({
				id: this.id
			}).then((res) => {
				if (res.code == 200) {
					if (res.data.status) {
						if (res.data.type == 0) {
							this.btntype = 1;
							this.$refs.popup5.open();
						} else {
							this.urlID = res.data.id;
							this.btntype = 2;
							this.$refs.popup5.open();
						}
					} else {
						this.yesBottom = true;
						this.$refs.popup4.open();
					}
				}
			});
		},
		gourl() {
			uni.navigateTo({
				url: `/pages/index/newpage/tradinfo?id=${this.urlID}`
			});
			this.close(5);
		},
		gosign() {
			createOrder({
				id: this.id
			}).then((res) => {
				if (res.code == 200) {
					uni.navigateTo({
						url: `/pages/index/newpage/tradinfo?id=${res.data.id}`
					});
					this.close(4);
					this.close(3);
				}
			});
		},
		lower() {
			this.yesBottom = false;
		},
		changetype(i) {
			this.params.priceUnit = i;
		},
		changeSelect(item) {
			console.log(item);
			this.orderList.forEach((item) => {
				item.isclick = false;
			});
			item.isclick = true;
			this.close(1);
			this.params.order = item.order;
			this.params.page = 1;
			this.list = [];
			this.getlist();
		},
		getlist() {
			getSearchList(this.params).then((res) => {
				if (res.code == 200) {
					if (this.params.page > 1 && res.data.list.length == 0) {
						this.nomore = true;
					}
					this.list = [...this.list, ...res.data.list];
					this.nolist = this.list.length == 0;
				}
			});
		},
		getwebconfig() {
			webconfig({}).then((res) => {
				if (res.code == 200) {
					this.wxpay = res.data.wxpay;
					this.wxquery = res.data.wxquery;
					this.dyprice = res.data.dyprice;
					this.safeOrderRemark = res.data.safeOrderRemark;
				}
			});
		},
		change(index) {
			this.navindex = index;
			this.$refs.popup1.open();
		},
		change2(index) {
			this.navindex = index;
		},
		popSunmit() {
			if (this.number1 && this.number2 && parseFloat(this.number1) > parseFloat(this.number2)) {
				this.$modal.msg('输入金额有误');
				return;
			}
			if (this.number1) {
				this.params.priceBegin = this.number1;
			}
			if (this.number2) {
				this.params.priceEnd = this.number2;
			}
			this.params.gameZoneName = this.kw;
			this.close(1);
			this.close(6);
			this.params.page = 1;
			this.list = [];
			this.getlist();
		},
		popRest() {
			this.params.gameZoneName = '';
			this.params.priceBegin = '';
			this.params.priceUnit = undefined;
			this.params.priceEnd = '';
			this.number1 = '';
			this.number2 = '';
			this.kw = '';
			this.params.page = 1;
		},
		changeZone(data) {
			this.params.gameZoneName = data.name;
			this.kw = data.name;
			this.flist = [];
		},
		confirm() {
			this.$throttling(() => {
				zoneList({
					name: ''
				}).then((res) => {
					if (res.code == 200) {
						this.flist = res.data.list;
						this.flist.forEach((item) => {
							if (item.name.includes(this.kw)) {
								const wrappedStr = item.name.replace(new RegExp(this.kw, 'g'), `<span style="color:#FF6F07">${this.kw}</span>`);
								item.name2 = wrappedStr;
							} else {
								item.name2 = item.name;
							}
						});
					}
				});
			});
		},
		open2(data) {
			this.userid = data.userId;
			this.id = data.id;
			this.itemData = data;
			if (this.wxpay == 1 || this.wxquery == 1) {
				// 开启付费
				let list = uni.getStorageSync('getBuyData') || [];
				if (list.length > 0) {
					let uid = uni.getStorageSync('uid');
					let ulist = list.filter(
						(item) => item.uid == uid && this.formattedDate == item.date && item.id == this.id && item.random == uni.getStorageSync('sListPageRandom')
					);
					if (ulist.length > 0) {
						// 已买过
						this.getData();
					} else {
						this.$refs.popup2.open();
					}
				} else {
					this.$refs.popup2.open();
				}
			} else {
				// 关闭付费 全免费看：只记录第一次，后续不再记录
				let list = uni.getStorageSync('getBuyData') || [];
				let uid = uni.getStorageSync('uid');
				// 过滤出当前用户、当天、当前信息ID的记录
				let ulist = list.filter((item) => item.uid == uid && this.formattedDate == item.date && item.id == this.id && item.random == uni.getStorageSync('sListPageRandom'));
				if (ulist.length > 0) {
					// 已有记录（非第一次），直接查看，不记录
					this.getData();
				} else {
					// 无记录（第一次），查看并记录
					this.getData();
					this.upData();
				}
			}
		},
		getData() {
			searchBuyerInfo(this.id).then((res) => {
				if (res.code == 200) {
					if (res.data.buyer) {
						this.isTwoPrice = true;
						res.data.buyer.maxBuyerPrice = res.data.price;
						this.priceData = res.data.buyer;
					} else {
						this.isTwoPrice = false;
					}
					searchinfo(this.id).then((res) => {
						if (res.code == 200) {
							this.data = res.data;
							this.$refs.popup2.close();
							this.$refs.popup3.open();
						}
					});
				}
			});
		},
		close(type) {
			this.$refs['popup' + type].close();
		},
		seePay() {
			if (this.userInfo.coin < this.dyprice) {
				this.$modal.msg('商人币不足');
				return;
			}
			uni.showModal({
				title: '温馨提示',
				content: `确认支付${this.dyprice}商人币查看信息`,
				success: (res) => {
					if (res.confirm) {
						searchpay({
							id: this.id,
							paytype: 2
						}).then((res) => {
							if (res.code == 200) {
								this.$modal.msg('支付成功');
								this.getData();
								this.upData();
							}
						});
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},

		upData() {
			updateNumber(this.id).then((res) => {
				let list = uni.getStorageSync('getBuyData') || [];
				let data = {
					uid: uni.getStorageSync('uid'),
					date: this.formattedDate,
					id: this.id,
					random: uni.getStorageSync('sListPageRandom')
				};
				list.push(data);
				uni.setStorageSync('getBuyData', JSON.parse(JSON.stringify(list)));
			});
		},
		seeAd() {
			uni.showToast({
				title: '暂未开通',
				icon: 'none'
			});
			return;
			uni.showLoading({
				title: '加载中...'
			});
			// #ifdef MP-TOUTIAO
			// 先销毁已存在的广告实例，避免重复绑定
			if (this.ad) {
				this.ad.offClose(); // 移除之前的关闭事件监听
				this.ad.destroy(); // 销毁实例
			}
			// 创建新的广告实例
			this.ad = tt.createRewardedVideoAd({
				adUnitId: 'qnyjogx75a7vfoogil'
			});

			// 监听错误
			this.ad.onError((err) => {
				tt.hideLoading();
				uni.hideLoading();
				uni.showToast({
					title: `广告错误: ${err.errCode}`,
					icon: 'none'
				});
			});

			// 定义关闭事件处理函数
			const closeHandler = (data) => {
				// 先移除事件监听，避免重复执行
				this.ad.offClose(closeHandler);

				uni.hideLoading();
				if (data.isEnded) {
					this.$modal.msg('观看完成');
					this.getData();
					this.upData();
				} else {
					this.$modal.msg('未观看完视频');
				}
				// 完成后销毁实例
				this.ad.destroy();
				this.ad = null;
			};

			// 绑定关闭事件
			this.ad.onClose(closeHandler);

			// 加载并显示广告
			this.ad
				.load()
				.then(() => {
					this.ad.show().catch((err) => {
						console.error('广告显示失败', err);
						uni.hideLoading();
						this.$modal.msg('广告加载失败，请重试');
					});
				})
				.catch((err) => {
					console.error('广告加载失败', err);
					uni.hideLoading();
					this.$modal.msg('广告加载失败，请重试');
				});
			// #endif
		},
		onCloseListener(res) {
			console.log(res);
		}
	}
};
</script>

<style lang="less">
@color: #ff6f07;

page {
	background: #fff !important;
}
.fixedimg{
	position: fixed;
	bottom: 150rpx;
	right: 30rpx;
	width: 100rpx;
	height: 100rpx;
	background: #FFFFFF;
	box-shadow: 0rpx 0rpx 8rpx 0rpx #E3E3E3;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	image{
		width: 60rpx;
		height: 60rpx;
		display: block;
	}
}

.popup5 {
	margin-bottom: 200rpx;

	.contetn {
		background-color: #fff;
		width: 620rpx;
		padding: 24rpx 40rpx;
		box-sizing: border-box;
		border-radius: 20rpx;

		.icon {
			right: 24rpx;
			position: absolute;
		}

		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 40rpx;
			color: #000000;
			text-align: center;
			margin-top: 30rpx;
		}

		.ts {
			margin: 50rpx auto 56rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #000000;
			text-align: center;
		}

		.btns_flex {
			display: flex;
			justify-content: space-between;

			.b1 {
				width: 260rpx;
				height: 90rpx;
				background: #f9f9f9;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #d1cdcd;
				text-align: center;
				line-height: 90rpx;
			}

			.b2 {
				width: 260rpx;
				height: 90rpx;
				background: linear-gradient(270deg, #ff6f07 0%, #ffa666 100%);
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #ffffff;
				text-align: center;
				line-height: 90rpx;
			}
		}
	}
}

.popup4 {
	.contetn {
		background-color: #fff;
		width: 690rpx;
		height: 1100rpx;
		position: fixed;
		bottom: 0;
		left: 30rpx;
		padding: 24rpx 50rpx;
		box-sizing: border-box;
		border-radius: 30rpx 30rpx 0rpx 0rpx;

		.icon {
			right: 24rpx;
			position: absolute;
		}

		.title {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 34rpx;
			color: #333333;
			text-align: center;
			line-height: 50rpx;
			margin-top: 34rpx;
		}

		.textsSclow {
			height: 500rpx;
			// overflow: auto;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #333333;
			line-height: 54rpx;
			margin: 40rpx auto;
		}

		.btntext {
			height: 90rpx;
			background: #b6b6b6;
			border-radius: 6rpx;
			margin-top: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 34rpx;
			color: #ffffff;
			line-height: 90rpx;
			text-align: center;
		}

		.active {
			background: #f8883b;
			border-radius: 6rpx;
		}
	}

	.bcgc {
		width: 100%;
		height: 248rpx;
		background-color: #f88538;
	}

	.imgs {
		width: 100%;
		height: 248rpx;
		z-index: 9;
		position: absolute;
		bottom: 0;
		display: flex;
		justify-content: center;

		.btntexts {
			margin-top: 10rpx;
			border-radius: 6rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			line-height: 90rpx;
			color: #ff6f07;
			position: absolute;
		}

		image {
			width: 100%;
			height: 248rpx;
			vertical-align: bottom;
		}
	}
}

.container {
	padding: 80rpx 20rpx 20rpx;

	.nomore {
		text-align: center;
		height: 60rpx;
		line-height: 60rpx;
		color: #979797;
		font-size: 24rpx;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.nolist {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		padding: 80rpx 0;

		image {
			width: 360rpx;
			height: 236rpx;
		}

		.p {
			margin-top: 50rpx;
			font-weight: 500;
			font-size: 24rpx;
			color: #979797;
			text-align: center;
			padding: 0rpx 30rpx;
		}

		.btns {
			margin-top: 50rpx;
			width: 690rpx;
			height: 100rpx;
			background: linear-gradient(270deg, #ff6f07 0%, #ffa666 100%);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #ffffff;
			text-align: center;
			line-height: 100rpx;
		}
	}

	.list {
		.item {
			border-bottom: 2rpx solid #eee;
			padding: 30rpx 0;
			background: #fff;

			.img {
				width: 220rpx;
				height: 220rpx;
				border-radius: 20rpx;
				overflow: hidden;
				background-color: #f8f8f8;
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;

				image {
					width: 100%;
					height: 100%;
				}

				.no {
					width: 100rpx;
					height: 100rpx;
				}
			}

			.con {
				flex: 1;
				width: 1rpx;
				margin-left: 20rpx;

				.title {
					line-height: 40rpx;
					font-weight: 500;
					font-size: 28rpx;
					color: #11192d;
					text-align: left;
				}

				.btns_flex {
					display: flex;
					justify-content: space-between;
					margin-top: 10rpx;
					color: #979797;
					font-size: 20rpx;
					align-items: flex-end;
					.btn {
						width: 186rpx;
						height: 76rpx;
						background: linear-gradient(270deg, #ff6f07 0%, #ffa666 100%);
						border-radius: 12rpx 12rpx 12rpx 12rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 32rpx;
						color: #ffffff;
						line-height: 76rpx;
						text-align: center;
					}
				}

				.price {
					height: 50rpx;
					line-height: 50rpx;

					.p {
						font-family: 'DIN';
						font-weight: bold;
						font-size: 36rpx;
						text-align: left;
					}

					.p5 {
						color: #ff70a4;
					}

					.p4 {
						color: #840ffb;
					}

					.p3 {
						color: #fe1515;
					}

					.p2 {
						color: #1ec742;
					}

					.p1 {
						color: #11192d;
					}

					.y {
						color: #979797;
						font-size: 20rpx;
						margin-left: 10rpx;
						font-weight: 400;
						height: 40rpx;
						line-height: 40rpx;
					}
				}

				.info {
					height: 40rpx;
					line-height: 40rpx;
					background: #f9f9f9;
					border-radius: 8rpx;
					padding: 0 10rpx;
					color: #979797;
					font-size: 20rpx;
					margin-top: 10rpx;
				}

				.info2 {
					background: #f9f9f9;
					border-radius: 8rpx;
					padding: 10rpx;
					margin-top: 10rpx;

					.i1 {
						line-height: 40rpx;
						height: 40rpx;

						text {
							color: #979797;
							font-size: 20rpx;
						}

						image {
							width: 30rpx;
							height: 30rpx;
							margin-left: 20rpx;
						}
					}

					.i2 {
						color: #ff6f07;
						font-size: 20rpx;
						line-height: 40rpx;
						height: 40rpx;
					}
				}
			}
		}
	}

	.index-nav {
		position: fixed;
		z-index: 9;
		left: 0;
		right: 0;
		top: 0;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #fff;
		justify-content: space-between;
		padding: 0rpx 30rpx;
		box-sizing: border-box;

		.item {
			text-align: center;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 30rpx;
			color: #11192d;

			text {
				margin-right: 10rpx;
			}

			image {
				width: 30rpx;
				height: 30rpx;
			}
		}
	}
}

.pop-data {
	padding: 20rpx;
	width: 620rpx;
	min-height: 620rpx;
	box-sizing: border-box;
	position: relative;
	background: #fff;
	border-radius: 30rpx;

	.close {
		position: absolute;
		bottom: -100rpx;
		left: 50%;
		margin-left: -30rpx;
		width: 60rpx;
		height: 60rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.data-img {
		width: 100%;
		height: 340rpx;
		overflow: hidden;
		border-radius: 20rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.data-con {
		margin-top: 20rpx;

		.title {
			line-height: 40rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #11192d;
			text-align: left;
		}
		.xbtn {
			width: 85rpx;
			height: 32rpx;
			background: #f9f9f9;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 20rpx;
			color: #979797;
			line-height: 32rpx;
			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 8rpx;
			}
		}
		.price {
			height: 50rpx;
			line-height: 50rpx;

			.p {
				font-family: 'DIN';
				font-weight: bold;
				font-size: 36rpx;
				text-align: left;
			}

			.p5 {
				color: #ff70a4;
			}

			.p4 {
				color: #840ffb;
			}

			.p3 {
				color: #fe1515;
			}

			.p2 {
				color: #1ec742;
			}

			.p1 {
				color: #11192d;
			}

			.y {
				color: #979797;
				font-size: 20rpx;
				margin-left: 10rpx;
				font-weight: 400;
				height: 40rpx;
				line-height: 40rpx;
			}
		}

		.info {
			height: 40rpx;
			line-height: 40rpx;
			background: #f9f9f9;
			border-radius: 8rpx;
			padding: 0 10rpx;
			color: #979797;
			font-size: 20rpx;
			margin-top: 10rpx;

			text {
				margin-left: 20rpx;
				color: #ff6f07;
			}
		}

		.info2 {
			background: #f9f9f9;
			border-radius: 8rpx;
			padding: 0 10rpx;
			color: #979797;
			font-size: 20rpx;
			margin-top: 10rpx;
			.p {
				height: 40rpx;
				line-height: 40rpx;
			}
			image{
				width: 24rpx;
				height: 24rpx;
				margin-right: 6rpx;
			}

			text {
				margin-left: 20rpx;
				color: #ff6f07;
			}
		}
	}
	.btn {
		margin-top: 30rpx;
		width: 100%;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		border-radius: 12rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #ffffff;
		background: linear-gradient(270deg, #ff6f07 0%, #ffa666 100%);
	}
}

.pop-footer {
	padding: 40rpx 30rpx;
	background: #fff;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	border-radius: 50rpx 50rpx 0rpx 0rpx;
	min-height: 300rpx;

	.icons {
		position: absolute;
		right: 30rpx;
		top: 30rpx;
	}

	.f-title {
		height: 60rpx;
		line-height: 60rpx;
		font-weight: bold;
		font-size: 40rpx;
		color: #000000;
		text-align: center;
	}

	.f-list {
		margin-top: 40rpx;

		.item {
			margin-bottom: 30rpx;
			position: relative;
			height: 140rpx;
			border-radius: 20rpx;
			overflow: hidden;
			padding: 0 30rpx;

			.bg {
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				width: 340rpx;
				height: 140rpx;
				z-index: 1;
				// filter: blur(100rpx);
			}

			.bg2 {
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				width: 422rpx;
				height: 140rpx;
				z-index: 1;
				// filter: blur(100rpx);
			}

			.img {
				position: relative;
				z-index: 999;
				width: 68rpx;
				height: 68rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.con {
				flex: 1;
				width: 1rpx;
				margin-left: 30rpx;
				position: relative;
				z-index: 999;
				font-weight: 500;
				font-size: 32rpx;

				.n {
					height: 44rpx;
					line-height: 44rpx;

					text-align: left;
				}

				.m {
					line-height: 30rpx;
					height: 30rpx;
					font-size: 20rpx;
					text-align: left;
				}
			}
		}

		.item1 {
			background: linear-gradient(90deg, #fffaea 0%, #ffdea9 100%);

			.con {
				.n {
					color: #b44b00;
				}

				.m {
					color: #dfa021;
				}
			}
		}

		.item2 {
			background: linear-gradient(90deg, #eef8ff 0%, #73b0ff 100%);

			.con {
				.n {
					color: #003b9d;
				}

				.m {
					color: #3371c2;
				}
			}
		}
	}
}

.pop-search {
	// padding: 0 0rpx 20rpx;
	background: #fff;
	height: 430rpx;
	box-sizing: border-box;
	border-radius: 0rpx 0rpx 30rpx 30rpx;

	.pop-btns {
		margin-top: 20rpx;
		padding: 0rpx 30rpx;

		.btn {
			width: calc(50% - 15rpx);
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 12rpx;
			text-align: center;
			font-size: 32rpx;
		}

		.btn1 {
			color: #11192d;
			background: #f4f4f4;
		}

		.btn2 {
			color: #fff;
			background: linear-gradient(270deg, #ff6f07 0%, #ffa666 100%);
		}
	}

	.middle {
		height: 230rpx;
		padding: 0 30rpx 10rpx;

		.search {
			height: 64rpx;
			line-height: 64prx;
			background: #f5f5f5;
			border-radius: 12rpx;
			padding: 0 20rpx;
			box-sizing: border-box;

			image {
				width: 32rpx;
				height: 32rpx;
			}

			input {
				flex: 1;
				margin-left: 20rpx;
				width: 1rpx;
				height: 64rpx;
				line-height: 64prx;
				font-size: 26rpx;
				color: #11192d;
			}
		}

		.s-list {
			background: #f5f5f5;
			padding: 10rpx 20rpx;
			border-radius: 0 0 10rpx 10rpx;

			.i {
				height: 64rpx;
				line-height: 64prx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.image1 {
					width: 32rpx;
					height: 32rpx;
				}

				.image2 {
					width: 40rpx;
					height: 40rpx;
				}

				.m {
					flex: 1;
					width: 1rpx;
					padding: 0 10rpx;
					font-size: 26rpx;
					color: #11192d;

					text {
						color: @color;
					}
				}
			}
		}

		.selectList {
			.items {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
				height: 80rpx;
				line-height: 80rpx;
				display: flex;
				justify-content: space-between;
				padding: 0rpx 30rpx;
			}

			.itemsSelect {
				padding: 0rpx 30rpx;
				background: #fff6f0;
				height: 80rpx;
				color: #ff6f07 !important;
			}
		}

		.item_flex {
			display: flex;
			align-items: center;
			justify-content: space-between;

			image {
				width: 36rpx;
				height: 36rpx;
				margin-right: 6rpx;
			}

			.ttt {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #11192d;
				display: flex;
				align-items: center;
			}
		}

		.m-t {
			line-height: 40rpx;
			height: 40rpx;
			font-size: 28rpx;
			color: #000000;
			text-align: left;

			text {
				font-size: 20rpx;
				color: #979797;
				margin-left: 10rpx;
			}
		}

		.m-inputs {
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;

			.i {
				width: 300rpx;
				height: 60rpx;
				background: #f5f5f5;
				border-radius: 8rpx;
				line-height: 60rpx;
				padding: 0 10rpx;
				box-sizing: border-box;

				input {
					width: 100%;
					height: 60rpx;
					line-height: 60rpx;
					font-size: 26rpx;
					color: #11192d;
				}
			}

			.i2 {
				width: 28rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				font-weight: 500;
				font-size: 48rpx;
				color: #979797;
			}
		}
	}

	.nav {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		justify-content: space-between;
		padding: 0rpx 30rpx;
		box-sizing: border-box;

		.item {
			// flex: 1;
			text-align: center;

			text {
				color: #11192d;
				font-size: 30rpx;
			}

			image {
				width: 30rpx;
				height: 30rpx;
				margin-left: 10rpx;
			}
		}

		.on {
			text {
				color: @color;
			}
		}
	}
}

.bottom_select {
	padding: 40rpx 20rpx;
	background: #fff;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	border-radius: 50rpx 50rpx 0rpx 0rpx;
	.icons {
		position: absolute;
		right: 30rpx;
		top: 30rpx;
	}

	.f-title {
		height: 60rpx;
		line-height: 60rpx;
		font-weight: bold;
		font-size: 32rpx;
		color: #000000;
		text-align: center;
	}
	.scroll {
		height: 700rpx;
		margin: 30rpx 0rpx;
		.flex_i {
			display: flex;
			flex-wrap: wrap;
		}
		.items {
			width: 220rpx;
			height: 68rpx;
			background: #ffffff;
			border-radius: 12rpx;
			border: 1px solid #d5d5d5;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #11192d;
			text-align: center;
			line-height: 68rpx;
			margin-bottom: 20rpx;
			margin-right: 18rpx;
		}
		.items:nth-child( 3n ){
			margin-right: 0rpx;
		}
		.actbtn{
			border: 1px solid #FF6F07;
			background: #FFF2E9;
			color: #FF6F07;
		}
	}
	.btns {
		.btn {
			width: 340rpx;
			height: 80rpx;
			background: #f4f4f4;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #11192d;
			text-align: center;
			line-height: 80rpx;
		}

		.b1 {
			background: linear-gradient(270deg, #ff6f07 0%, #ffa666 100%);
			color: #ffffff;
		}
	}
}
</style>
